import React, { useState,useEffect } from "react";
import IndexCurrentWeather from '../components/index-current-weather';
import Loading from '../components/loading/index'
import Detail from './detail';
import { useWeather } from '../hooks/useWeather';
import '../style/index.scss'


export default  function Index(props) {

  const [show, setDetailShow] = useState(false)
  const {current, daily, hourly, hourEcharts, isLoading,isError }  = useWeather({
    exclude: 'minutely',
    weatherType: 'all'
  });
  const onCloseDetail = () => {
    setDetailShow(false)
  }
  const onOpenDetail = () => {
    setDetailShow(true)
  }
    console.log('isLoading-s', isLoading)
  if (isLoading) return <Loading />;
  return (<div className='home'>
     <div className="home-current">
      <IndexCurrentWeather weather={current} isError={isError} isLoading={isLoading} 
        onOpenDetail={onOpenDetail}
      />
     </div>
     
     <div className="home-detail">
       <Detail 
        current={current} 
        daily={daily} 
        hourly={hourly} 
        isError={isError} 
        hourEcharts={hourEcharts} 
        isLoading={isLoading} 
        onClose={onCloseDetail}
        show={show}
      />
     </div>
  </div>)
}
